<template>
  <div>
    <search-form />
    <div>
      <ming-table
        v-model:data="tableData"
        v-loading="loading"
        :total="total"
        :fields="columns"
        :no-first="false"
        :current-page="currentPage"
        @paginationChange="paginationChange"
      >
        <template #options>
          <el-button type="text">查看</el-button>
        </template>
      </ming-table>
		</div>
		<el-dialog
			title="提示"
			v-model="dialogVisible"
			width="30%"
			:before-close="handleClose">
			<span>这是一段信息</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</template>
		</el-dialog>
  </div>
</template>

<script>
  import MingTable from '@/components/comm/MingTable/index.vue';
  import SearchForm from './comm/SearchForm.vue'
  import { ElMessageBox } from 'element-plus';
  import { defineComponent, reactive, toRefs, computed } from 'vue';

  export default defineComponent({
    components: { MingTable, SearchForm },
    setup () {
      const tableData = [{
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      }, {
        id: 2,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      }, {
        id: 3,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      }, {
        id: 4,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      }, {
        id: 5,
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      }, {
        id: 6,
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      }, {
        id: 7,
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      }]
      const columns = [
        {
          label: '日期',
          field: 'date'
        },
        {
          label: '姓名',
          field: 'name'
        },
        {
          label: '地址',
          field: 'address'
        },
        {
          label: '班级',
          field: 'class'
        },
        {
          label: '学校',
          field: 'school'
        },
        {
          label: '',
          field: 'options',
          slot: true
        }
      ]
      const state = reactive({
        form: {
          user: '',
          grade: ''
        },
        total: 0,
        page: 1,
        loading: false,
        dialogVisible: false
      })
      const currentPage = computed(() => state.page)
      const methods = {
        handleSelect: (val) => {
          console.log(val);
        },
        paginationChange: (option) => {
          console.log(option);
        },
        handleCLick: (type, scope) => {
          console.log(type);
          if (type === 'edit') {
            state.dialogVisible = true;
          } else {
            ctx.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ctx.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              ctx.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        },
        handleClose: () => {
          state.dialogVisible = false;
        }
      }
      return {
        ...toRefs(state),
        tableData,
        columns,
        currentPage,
        ...methods
      }
    }
  })
</script>